<!--
 * @Author: wangming
 * @Date: 2021-03-26 14:10:26
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-25 15:13:53
 * @Description: 万能页面设计
-->
<route>
{
  "meta":{
    "title":"页面设计"
  }
}
</route>
<template>
  <formNav
    :title="`PC页面设计（${$route.query.name}）`"
    @goPreview="goPreview"
    @save="submit"
    @setting="setFormSetting"
    :lockBy.sync="lockBy"
    :formList="formList"
    ref="formNav"
  >
    <div class="formbox sz" :class="{ container: getNavName === 'preview' }">
      <preview
        v-if="getNavName === 'preview'"
        :formList="formList"
        :hmpageInfo="getFormDataForMain"
      ></preview>
      <dynamicIframe
        :showDesign="getNavName === 'home'"
        :formList="formList"
        :hmpageInfo="getFormDataForMain"
      ></dynamicIframe>
      <dynamicIframe
        v-if="getNavName === 'template'"
        :formList="getTemplateDate.formList"
        :hmpageInfo="getTemplateDate.FormData"
      >
      </dynamicIframe>
    </div>
  </formNav>
</template>

<script>
import formNav from "./__components__/formNav/index";
import dynamicIframe from "./__components__/dynamicForm/index.vue";
import { beforeunload } from "@/utils/mixins";
import preview from "./__components__/preview";
import commonModule from "./__components__/commonModule";
import {
  getHmpageInfo,
  putHmpageDesign,
} from "@/apis/paas/HmPageController.js";
import { mapActions, mapGetters } from "vuex";
import eventBus from "@/utils/eventBus";
export default {
  mounted() {
    this.init();
    eventBus.$on("recoveryJson", ({ FormData, formList }) => {
      this.setForm();
      this.setModelForm({});
      this.formList = [...formList];
      this.setFormData(FormData);
      this.setModelList(this.formList);
      this.$message.success("操作成功");
    });
  },
  destroyed() {
    eventBus.$off("recoveryJson");
    this.setFormData({});
    this.setModelList([]);
    this.setForm();
    this.setNavName("home");
  },
  mixins: [beforeunload],
  layout: "formlayout",
  components: { formNav, dynamicIframe, preview },
  computed: {
    ...mapGetters(["getFormDataForMain", "getNavName", "getTemplateDate"]),
  },
  data() {
    return {
      lockBy: "", //锁定的用户id
      formList: [],
    };
  },
  methods: {
    ...mapActions([
      "setFormData",
      "setNavName",
      "setModelList",
      "setForm",
      "setModelForm",
      "setHistoryId",
    ]),
    async init() {
      this.setHistoryId("");
      this.setModelList(this.formList);
      let { json, lockBy, key } = await getHmpageInfo({
        id: this.$route.query.id,
        includeJson: true,
      });
      this.lockBy = lockBy;
      if (!!json) {
        let { FormData, formList } = JSON.parse(json);
        this.formList = formList;
        this.setModelList(this.formList);
        this.setFormData({ ...FormData, key });
        await this.$nextTick();
        this.$refs.formNav.cloneJSON();
      }
    },
    async save() {
      let jsonData = {
        formList: this.formList,
        FormData: this.getFormDataForMain,
      };
      let json = JSON.stringify(jsonData);
      await putHmpageDesign({ id: this.$route.query.id, json });
      this.setHistoryId("");
      eventBus.$emit("saveHistory");
    },
    async submit(autoSave) {
      try {
        await this.checkForm();
        await this.save();
        !!autoSave || this.$message.success("操作成功");
      } catch (error) {
        console.log(error);
      }
    },
    checkForm() {
      this.transformModelTree(this.formList);
    },
    transformModelTree(tree) {
      let queen = [];
      queen = queen.concat(tree);
      while (queen.length) {
        let first = queen.shift();
        if (first.children) {
          queen = [].concat(first.children, queen);
        }
      }
    },
    setFormSetting() {
      commonModule.openForm(this.getFormDataForMain).then((res) => {
        Object.assign(this.getFormDataForMain, res);
      });
    },
    async goPreview() {
      await this.checkForm();
      this.setNavName("preview");
    },
  },
};
</script>
<style lang="scss" scoped>
.formbox {
  padding-top: 65px;
  height: 100%;
}
</style>
